<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/7.css">
</head>
<body>
    <div class="box">
        <div class="title">
            <!-- <span class="active">薛之谦</span> -->
        </div>

        <div class="con">
            <!-- <p></p>

            <dl>
                <dt><img src="./img/1.jpg"></dt>
                <dd>的合金变成基督教是</dd>
            </dl> -->
        </div>
    </div>
    <script src="./js/6Data.js"></script>
    <script>
        // 1 获取元素
        var tit = document.querySelector(".title");
        var con = document.querySelector(".con") ;
        var curI = 0;  // 初始化下标  用于默认初始展示
        // 2 渲染标题
        tit.innerHTML = data.map(function(obj , i){
            return `<span class="${curI === i ? 'active' : ''}">${obj.tit}</span>`
        }).join("")
        // 3 初始化内容
        renderCon(data[curI])


        

        // 获取所有标题
        var tits = tit.querySelectorAll("span");
        // 给每个标题span 绑定点击事件  即 循环绑定
        tits.forEach(function(span , i){
            span.onclick = function(){
                tits[curI].classList.remove("active");
                curI = i;
                tits[curI].classList.add("active")
                renderCon(data[curI])
            }
        })

        // 默认初始显示详情内容 点击 需要找到对应的数据 渲染详情内容
        function renderCon(data){
            con.innerHTML = data.con.map(function(item){
                // 判断当前数据是字符串 直接p塞进去 否则对象dl
                return typeof item === "string" ? `<p>${item}</p>` : `
                            <dl>
                                <dt><img src="${item.src}"></dt>
                                <dd>${item.des}</dd>
                            </dl>
                            `
            }).join("")
        }
    </script>
</body>
</html>